<script setup>

import {ref, onMounted, defineProps, defineOptions, useSlots, onUpdated, inject,defineEmits} from "vue";
import {Close} from "@element-plus/icons-vue";
import {phraseOWordPickInputEventProvides} from "@/components/constants";
defineOptions({
  inheritAttrs: false
})
const props = defineProps(["toStayEnlarged","closable"]);
const emits = defineEmits(["deleteClicked"]);

let slots = useSlots();
let maxWidth = ref(50);
let maxHeight = ref(20);

function recalcMaxHeightWidth() {
    // console.log("HoverEnlargable.vue updated");
    let theChildren = slots.default()[0].children;
    // console.log("theChildren,",theChildren);
    if (theChildren instanceof Array) {
        maxHeight.value = theChildren?.length * 20;
    } else if(theChildren?.length){
        maxWidth.value = theChildren.length * 11;
    }
}

let phraseOWordPickInputEvtProvides = inject(phraseOWordPickInputEventProvides, undefined);

function deleteTheRemark(e){
    // console.log(`close Action ...`);
    e.stopPropagation();
    // phraseOWordPickInputEvtProvides?.deleteTheRemark(props.idxInRemarks);
    emits("deleteClicked");
}

onUpdated(()=>{
    recalcMaxHeightWidth();
})

onMounted(()=>{
    recalcMaxHeightWidth();
  // let theChildren = slots.default()[0].children;
  // console.log("theChildren:",slots.default(),theChildren,theChildren.length,theChildren.length*11);
  // console.log("theChildren type:",theChildren instanceof Array)

})
</script>

<template>
  <!--  <div ref="theTest" style="border: 1px solid" :class="{shrinked:!enlarging,enlarged:enlarging}"> test here</div>-->
  <!--  <div @click="console.log($attrs.style[`z-index`])">-->
  <!--  {{$attrs}}-->
  <!--  <div :style="{zIndex:$attrs.style[`zIndex`],'&#45;&#45;base-zIndex':$attrs.style[`zIndex`]}" class="contDiv">-->
<!--  <div :style="{'&#45;&#45;base-zIndex':$attrs.style[`zIndex`],marginLeft:$attrs.style[`margin-left`]}" class="contDiv"-->
  <div :style="{marginLeft:$attrs.style[`margin-left`]}" class="contDiv">
<!--      <div :style="{marginLeft:$attrs.style[`margin-left`]}" class="contDiv"-->
<!--           @click="()=>{-->
<!--         // console.log(`the slots:`,slots.default()[0].children.length);-->
<!--         // console.log(`&#45;&#45;aniToHeight`,$attrs.style[`&#45;&#45;aniToHeight`]);-->
<!--       }">-->
    <!--    {{$attrs.style}}-->
<!--    <div style="height: 19px;border: 1px solid red;" :style="{width:$attrs.style[`&#45;&#45;shrinkedWidth`]?$attrs.style[`&#45;&#45;shrinkedWidth`]:`30px`}">-->
<!--    <div style="height: 19px;" :style="{width:$attrs.style[`&#45;&#45;shrinkedWidth`]?$attrs.style[`&#45;&#45;shrinkedWidth`]:`30px`}">-->
    <div style="height: 19px"
         :style="{
            width:$attrs.style[`--overlieWidth`]?$attrs.style[`--overlieWidth`]:($attrs.style[`--shrinkedWidth`]?$attrs.style[`--shrinkedWidth`]:`10px`),
            // zIndex:199
      }">
      <!--      <div class="theTest" v-bind="$attrs" >-->
      <!--      <div class="theTest" :style="{'&#45;&#45;aniToWidth':$attrs.style[`&#45;&#45;aniToWidth`]}">-->
      <div class="theTest"
           :class="{stayEnlarged:toStayEnlarged}"
           :style="{
              // '--aniToWidth':(maxWidth>500?500:maxWidth)+`px`,
              '--aniToWidth':$attrs.style[`--aniToWidth`]?$attrs.style[`--aniToWidth`]:(maxWidth +`px`),
              '--aniToHeight':$attrs.style[`--aniToHeight`]?$attrs.style[`--aniToHeight`]:(maxHeight +`px`),
              '--shrinkedWidth':$attrs.style[`--shrinkedWidth`]?$attrs.style[`--shrinkedWidth`]:`30px`,
              '--shrinkedHeight':$attrs.style[`--shrinkedHeight`]?$attrs.style[`--shrinkedHeight`]:`20px`,
              '--aniFromWidthType':`var(${$attrs.style[`--aniFromWidthType`]})`,
              '--hoveringPadding':$attrs.style[`--hoveringPadding`]?$attrs.style[`--hoveringPadding`]:`0`,
              border:$attrs.style[`border`]
              // boxShadow: `var(--el-box-shadow-dark)`
              // boxShadow: `var(--el-box-shadow)`
              // '--aniToHeight':`fit-content`
            }">
          <div v-if="closable" style="float: right" class="closeAction"><el-icon size="13px" class="closeIcon" @click="deleteTheRemark"><Close/></el-icon></div>
        <!--    <div class="theTest" >-->
        <slot></slot>
        <!--    </div>-->
      </div>
    </div>

  </div>
  <!--  <el-text ref="theTest"> test here</el-text>-->
</template>
<style scoped>

.contDiv{
  position: relative;
  width: fit-content;
}
.contDiv:hover{
}

.closeIcon:hover{
    color: #1e55dc;
    cursor: pointer;
}
.theTest{
  font-size: 12px;
  width: var(--shrinkedWidth);
    /*testProp:var(--aniFromWidthType);*/
  /*height: 20px;*/
  height: var(--shrinkedHeight);
  /*border: 1px solid blue;*/
  border-radius: 3px;
  background-color: white;
  //padding: 1px;
  //padding-left: 3px;
  overflow:hidden;
  position: absolute;
  /*atestvar:var(--aniToHeight);*/
  /*box-shadow: var(--el-box-shadow);*/
  //white-space: nowrap;
    .closeAction{
        display: none;
    }
}

.theTest:hover{
  box-shadow: var(--el-box-shadow);
  z-index: 10000;
  background-color: white;
  animation: enlarging .4s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  //padding:7px;
  padding:var(--hoveringPadding);
  .closeAction{
      display: inherit;
  }
}

@keyframes enlarging {
  0%{
    /*width: 60px;*/
    width: var(--aniFromWidthType);
    /*width: var(--aniToWidth);*/
    /*width: var(--shrinkedWidth);*/
    /*width: 30px;*/
    /*height: 20px;*/
    height: var(--shrinkedHeight);
    //white-space: nowrap;
  }

  100%{
    width: var(--aniToWidth);
    /*width: 200px;*/
    //width: fit-content;
    max-width: 3000px;
    max-height: 5000px;
    min-height: 20px;
    //height: var(--aniToHeight);
    height: var(--aniToHeight);
    /*height: 80px;*/
    //white-space: normal;
  }
}

.theTest.stayEnlarged{
    box-shadow: var(--el-box-shadow);
    z-index: 10000;
    background-color: white;
    animation: enlarging .4s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    //padding:7px;
    padding:var(--hoveringPadding);
    width: var(--aniToWidth);
    max-width: 3000px;
    max-height: 5000px;
    min-height: 20px;
    height: var(--aniToHeight);
}
</style>